smart<template>
  <div id="file-detail">
    <van-nav-bar title="老人档案详情" left-arrow @click-left="onClickLeft" fixed />
    <div class="old-detail">
      <p class="id-style">编号： {{oldDetail.id}}</p>
      <p class="gender-style">
        <span>{{oldDetail.username}} &nbsp;| &nbsp;</span>
        <span>{{oldDetail.gender == 1?"男": (oldDetail.gender == 2?"女":"未知")}} &nbsp;| &nbsp;</span>
        <span>{{oldDetail.age}}</span>
      </p>
      <p class="all-text-style">籍贯： {{oldDetail.birthplace}}</p>
      <p class="all-text-style">民族： {{oldDetail.nationalityName}}</p>
      <p class="all-text-style">政治面貌： {{oldDetail.politics}}</p>
      <p class="all-text-style">
        婚姻状况： 
        {{oldDetail.maritalStatus== 1 ? "未婚" : ( oldDetail.maritalStatus == 2 ? "已婚" : (oldDetail.maritalStatus == 3 ? "丧偶" : (oldDetail.maritalStatus == 4 ? "离婚" :"未知")))}}
      </p>
      <p class="all-text-style">是否独居： {{oldDetail.isLiveAlone == true?'是':'否'}}</p>
      <p class="all-text-style">联系电话： {{oldDetail.phone}}</p>
      <p class="all-text-style">身份证号： {{oldDetail.idcardNo}}</p>
      <p class="all-text-style">家庭住址： 
        {{oldDetail.community}} {{oldDetail.neighborhood}} {{oldDetail.building}} {{oldDetail.unit}}
      </p>
      <img v-lazy="oldDetail.image" v-if="oldDetail.image"/>
      <img v-lazy="defultImg"  v-if="!oldDetail.image"/>
    </div>
    <van-tabs v-model="activeName">
      <van-tab title="病例信息" name="case" class="case-message">
        <van-list>
          <van-cell v-for="(item, index) in caseList" :key="index">
            <p style="text-indent:2em">
               患者于{{item.diagnosticDate}}在{{item.diagnosticUnit}}诊断，诊断结果为{{item.diagnostic}}
            </p>
          </van-cell>
        </van-list>
      </van-tab>
      <van-tab title="家属信息" name="relation">
        <van-list class="news-content">
          <van-cell v-for="(item, index) in relationList" :key="index" class="message-card">
            <div>
              <van-image :src="item.images" class="message-img" />
              <div class="message-detail">
                <span class="message-name">{{item.username}}</span>
                <span class="message-role">{{item.relation}}</span>
                <p class="message-tel">
                  <van-icon name="phone-o" />
                  <span>电话：{{item.phone}}</span>
                </p>
              </div>
            </div>
          </van-cell>
        </van-list>
      </van-tab>
      <van-tab title="巡查信息" name="patrol" class="patrol-message">
        <!-- {{tabList.patrol.content}} -->
        <van-pull-refresh 
          v-model="isLoading"
          success-text="刷新成功"
          @refresh="onRefresh">
          <div style="background:#F5F5F5 100%; border-top: 0.5px solid #e2e2e2;" class="table-style">
            <span class="title-border">巡查时间</span>
            <span>巡查人</span>
            <span>老人状态</span>
          </div>
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <van-cell v-for="item in patrolList" :key="item.id" class="patrol-cell">
              <div class="table-style">
                <span class="special-border">{{item.careDate}}</span>
                <span>{{item.inspectorName}}</span>
                <span>{{item.isTrace == 1?"正常":(item.isTrace == 2?"异常":(item.isTrace == 3?"异常已处理":""))}}</span>
              </div>
            </van-cell>
          </van-list>
        </van-pull-refresh>
      </van-tab>
    </van-tabs>
    <van-popup v-model="showLoading">
      <van-loading color="#DC4630" />
    </van-popup>
  </div>
</template>
<script>
import api from "@/controller/agedService.js";
import constant from "@/controller/constant.js";
export default {
  name: "oldAgeFileDetail",
  data() {
    return {
      activeName: "case",
      viewid: "",
      oldDetail: {},
      caseList: [],
      relationList: [],
      patrolList: [],
      isLoading: false,
      finished: false,
      loading: false,
      curPage: 1,
      pageSize: 5,
      defultImg: require("@/icons/img/head.png"),
      showLoading: false
    };
  },
  created() {
    this.viewid = Number(this.$route.query.viewId);
    this.getFileDetail(this.viewid)
    this.showLoading = true
    setTimeout(() => {
      this.showLoading = false
    }, 800)
  },
  methods: {
    // 下拉刷新
    onRefresh() {
      this.curPage += 1;
      setTimeout(() => {
        this.isLoading = false;
        this.getFileDetail(this.viewid);
      },500)
    },
    // 下滑刷新
    onLoad() {
      this.onRefresh()
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    // 获取老人档案全部详情
    getFileDetail(val) {
      const data = {
        "curPage": this.curPage,
        "pageSize": this.pageSize
      }
      api 
      .pensionCare_v1_get(val, data)
      .then(res => {
        if(res.code === "0") {
          this.oldDetail = res.datas.careArchiveEntity;
          this.caseList = res.datas.careCaseEntityList;
          this.relationList = res.datas.careFamilyEntityList;
          this.showLoading = false
          if(
            (res.datas && res.datas.careRecordEntityList.records.length === 0) ||
            res.datas === null
          ) {
            // this.$toast("暂无更多数据");
            this.loading = false;
            this.isLoading = false;
            this.finished = true;
            return;
          }
          this.$nextTick(() => {
            this.loading = false;
            this.isLoading = false;
          });
          this.patrolList = [...this.patrolList, ...res.datas.careRecordEntityList.records];
          if (res.datas.careRecordEntityList.records.length < this.pageSize) {
            this.finished = true
          }
        }
      })
      .catch(() => {
        this.$toast(constant.netErrMsg);
      })
    }
  }
};
</script>
<style lang="scss" scope>
#file-detail {
  font-family: PingFangSC-Regular;
  font-size: 14px;
  color: #666666;
  .old-detail {
    width: 375px;
    padding: 15px;
    background: white;
    p {
      font-family: PingFangSC-Regular;
      font-size: 14px;
      color: #666666;
      letter-spacing: 0;
      line-height: 20px;
      margin-bottom: 15px;
    }
    .id-style {
      font-family: PingFangSC-Medium;
      font-size: 16px;
      color: #333333;
      letter-spacing: 0;
      font-weight: bolder;
      line-height: 22.5px;
    }
    .gender-style {
      font-family: PingFangSC-Regular;
      font-size: 14px;
      color: #333333;
      letter-spacing: 0;
      line-height: 20px;
    }
    img {
      width: 50px;
      height: 50px;
      position: absolute;
      top: 62px;
      right: 15px;
      border-radius: 100%;
    }
  }
  .van-card {
    .van-card__header {
      min-height: 50px;
    }
    .van-card__content {
      height: 50px;
    }
  }
  .van-card__thumb {
    width: 50px;
    height: 50px;
    margin-right: 15px;
  }
  .van-tabs {
    margin-top: 10px;
    .van-tabs__nav {
      font-weight: bolder;
      .van-tab {
        color: #333333;
        font-family: PingFangSC-Medium;
        font-size: 16px;
        letter-spacing: 0;
      }
      .van-tab--active {
        color: #dc4630 !important;
        font-weight: bolder;
        font-size: 16px;
      }
    }
    .van-tabs__content {
      .van-tab__pane {
        background: #ffffff !important;
        min-height: calc(100vh - 482px);
        padding: 0 15px;
        margin: 0 auto;
      }
    }
    .van-cell {
      width: 345px;
      background: #ffffff;
      margin: 0;
      border-bottom: 0.5px solid #e2e2e2;
      padding: 15px 0;
    }
    .message-img {
      width: 50px;
      height: 50px;
      border-radius: 100%;
      display: inline-block;
      vertical-align: top;
      img {
        width: 100%;
        height: 100%;
        border-radius: 100%;
      }
    }
    .message-detail {
      height: 50px;
      display: inline-block;
      vertical-align: top;
      line-height: 30px;
      font-size: 14px;
      margin-left: 15px;
      .message-name {
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: #333333;
        letter-spacing: 0;
      }
      .message-role {
        background: rgba(220, 70, 48, 0.1);
        border-radius: 2px;
        display: inline-block;
        width: 36.5px;
        height: 18px;
        font-family: PingFangSC-Regular;
        font-size: 10px;
        color: #dc4630;
        letter-spacing: 0;
        text-align: center;
        line-height: 18px;
        margin-left: 7px;
      }
      .message-tel {
        font-family: PingFangSC-Regular;
        font-size: 12px;
        color: #666666;
        letter-spacing: 0;
        line-height: 16.5px;
        margin-top: 3.5px;
        i {
          font-size: 12.75px;
          line-height: 16.5px;
          position: absolute;
          top: 34.5px;
        }
        span {
          margin-left: 20.5px;
        }
      }
    }
    .patrol-cell {
      padding: 0;
    }
    .table-style {
      text-align: center;
      width: 341px;
      border-radius: 2px;
      margin: 0 auto;
      font-size: 0;
      height: 31px;
      line-height: 31px;
      .special-border {
        border-left:  0.5px solid #e2e2e2 !important;
        width: 155px !important;
      }
      .title-border {
        border-left:  0.5px solid #e2e2e2 !important;
        width: 155px !important;
      }
      span{
        border: 0.5px solid #e2e2e2;
        border-top: none;
        border-left: none;
        text-align: center;
        width: 90px;
        display: inline-block;
        font-family: PingFangSC-Regular;
        letter-spacing: 0;
        font-size: 14px;
        color: #666666;
        height: 30px;
      }
    }
  }
  .case-message,
  .patrol-message {
    padding-top: 10px !important;
  }
}
</style>